<script setup lang="ts">
  import { ref } from "vue";
  import { ElTable, ElMessageBox } from "element-plus";
  import Dialog from "@/components/order/Dialog.vue";

  const
    entity = ref<InstanceType<typeof Dialog>>(),
    page = ref<gt.PageData<gt.sql.order>>({ current: 1, size: 10, total: 0, data: [] }),
    tip = ref([
      { label: `查看`, value: 2, cls: "mac-ico-search", per: true },
      { label: `发货`, value: 9, cls: "mac-ico-salesinvoice", per: true },
    ] as const);
  async function init() {
    const qr: R<gt.sql.order>[] = [];
    const res = await gd.order.read({
      "#page": { current: page.value.current, size: page.value.size },
      "#rule": qr,
      "#order": [["createTime", "DESC"]]
    });
    page.value = res;
  }
  init();
  async function click(type: number, p?: gt.sql.order) {
    if (!p) {
      p = format.def.order;
    }
    if (type === 5) { // 刷新单据
      await api.request({ id: p?.id }, "order/refresh");
      msg("刷新单据成功", "success");
      return;
    } else if (type === 9) {
      ElMessageBox({
        title: "发货信息",
        message: "请输入发货信息",
        inputValue: p.sendDes,
        inputPlaceholder: "请输入发货信息",
        // inputPattern: /^.{5,255}$/,
        // inputErrorMessage: "长度限制为5-255",
        showInput: true,
        callback() { },
        async beforeClose(action, instance, done) {
          if (action == "confirm") {
            // p.sendDes = instance.inputValue;
            const r = await api.request({ id: p.id, sendDes: instance.inputValue }, "order/send");
            if (r) {
              p.sendDes = instance.inputValue;
              msg("发货成功", "success");
            }
          }
          done();
        },
      });

      return;
    }

    entity.value?.open(type as gt.curd, p as any, "消费单");
  }
  // @ts-ignore
  function rowClass({ row }: { row: gt.sql.order; }) {
    return "";
  }
</script>
<template>
  <div class="List y whf">
    <el-table stripe highlight-current-row :data="page.data" class="wf fg1" type="expand" row-key="id"
      :rowClassName="rowClass">
      <el-table-column prop="id" label="id" width="100" show-overflow-tooltip />
      <el-table-column prop="_createTime" label="创建时间" width="120" show-overflow-tooltip />
      <el-table-column prop="_user.name" label="创建人" width="120" show-overflow-tooltip />
      <el-table-column prop="_t" label="状态" width="80" show-overflow-tooltip />
      <el-table-column prop="oid" label="支付单号" width="100" show-overflow-tooltip />
      <el-table-column prop="name" label="名称" width="120" show-overflow-tooltip />
      <el-table-column prop="_sum" label="数量" width="60" show-overflow-tooltip />
      <el-table-column prop="money" label="金额(分)" width="120" show-overflow-tooltip />
      <el-table-column prop="sendDes" label="发货信息" width="100" show-overflow-tooltip />
      <el-table-column prop="_recvAddr" label="收货信息" show-overflow-tooltip />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <div class="buttons x zb">
            <template v-for="a in tip">
              <el-tooltip v-if="a.per" :content="a.label">
                <div :class="a.cls" @click.stop="click(a.value, row)" />
              </el-tooltip>
            </template>
            <template v-if="row.sx">
              <el-tooltip content="刷新单据状态">
                <div class="mac-ico-refund" @click.stop="click(5, row)" />
              </el-tooltip>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next, jumper, ->, sizes, total"
      :page-sizes="[10, 20, 30, 40, 50, 100]" v-model:page-size="page.size" :total="page.total"
      v-model:currentPage="page.current" @size-change="init" @current-change="init" />
    <Dialog @confirm="init" ref="entity" />
  </div>
</template>
<style lang="scss">
  .List {
    position: relative;
    .buttons {
      >div {
        cursor: pointer;
        padding: 0 0.4em;
        font-weight: 600;
        &:hover {
          border: 1px solid #a5a5a5;
          box-sizing: border-box;
          border-radius: 0.5em;
          box-shadow: 0 0 10px #000;
        }
      }
      >.mac-ico-add-round {
        color: var(--color-success);
      }
      >.mac-ico-edit {
        color: var(--color-warning);
      }
      >.mac-ico-search {
        color: var(--color-primary);
      }
      >.mac-ico-salesinvoice {
        color: var(--color-success);
      }
      >.mac-ico-delete {
        color: var(--color-error);
      }
    }
    .el-table {

      .blueRow {
        color: blue;
      }
      .redRow {
        color: red;
      }
    }
  }
</style>